<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="__STATIC__/admin/lib/layui-v2.5.4/css/layui.css" media="all">
    <link rel="stylesheet" href="__STATIC__/admin/css/public.css" media="all">
    <style>
        .inoutCls {
            height: 22px;
            line-height: 22px;
            padding: 0 5px;
            font-size: 12px;
            background-color: #1E9FFF;
            max-width: 80px;
            border: none;
            color: #fff;
            margin-left: 10px;
            display: inline-block;
            white-space: nowrap;
            text-align: center;
            border-radius: 2px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <button type="button" class="layui-btn add">添 加</button>

        <div class="layui-form" style="margin-top: 20px;">
            <table class="layui-table">
                <colgroup>
                    <col width="50">
                    <col width="50">
                    <col width="220">
                    <col width="140">
                    <col width="140">
                    <col width="85">
                    <col width="50">
                    <col width="120">
                </colgroup>
                <thead>
                <tr>
                    <th>排序</th>
                    <th>id</th>
                    <th>标题</th>
                    <th class="text-center">创建时间</th>
                    <th class="text-center">修改时间</th>
                    <th class="text-center">操作人</th>
                    <th class="text-center">状 态</th>
                    <th>操作管理</th>
                </tr>
                </thead>
                <tbody>
                <!--一级类目循环-->
                {volist name="category" id="vo"}
                <tr id="category_{$vo.id}">
                    <td>
                        <div class="layui-input-inline">
                            <input type="text" value="{$vo.listorder}" data-id="{$vo.id}" class="changeSort layui-input">
                        </div>
                    </td>
                    <td>{$vo.id}</td>
                    <td data-id="{$vo.id}" class="classChildFind" data-level="1" data-has="0">
                        {if $vo.childCount > 0}
                        <i class="layui-icon" data-direction="0">&#xe623;</i>
                        {/if}
                        {$vo.name}
                    </td>
                    <td>{$vo.create_time}</td>
                    <td>{$vo.update_time}</td>
                    <td>{$vo.operate_user}</td>
                    <td data-id="{$vo.id}">
                        <input type="checkbox" {if $vo.status == 1}checked{else /}{/if} name="status" lay-skin="switch"
                                           lay-filter="switchStatus"
                                           lay-text="ON|OFF">
                    </td>
                    <td>
                        <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete delete" data-ptype="1"
                           lay-event="delete" data-id="{$vo.id}"><i class="layui-icon">&#xe640;</i></a>
                        <button type="button" data-id="{$vo.id}" class="layui-btn layui-btn-xs update"><i class="layui-icon">&#xe642;</i></button>
                        <button type="button" data-id="{$vo.id}" class="layui-btn layui-btn-xs addcate">+</button>
                    </td>
                </tr>
                {/volist}
                <!--一级类目循环 end-->
                </tbody>
            </table>
        </div>
        <div id="pages"></div>
    </div>

</div>
<script src="__STATIC__/admin/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="__STATIC__/admin/lib/layui-v2.5.4/layui.js" charset="utf-8"></script>
<script src="__STATIC__/admin/js/common.js?v5" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use(['form', 'laypage'], function () {
        var form = layui.form
            , laypage = layui.laypage;

        // 添加 分类
        $('.add').on('click', function () {
            layObj.dialog("/admin/category/add")
        });

        $(document).on('click', '.addcate', function(){
            let id = $(this).attr('data-id');
            layObj.dialog("/admin/category/add?id=" + id)
        });

        // 分类信息修改
        $(document).on('click', '.update', function(){
            var id = $(this).attr('data-id');
            layObj.dialog("/admin/category/edit?id=" + id);
        })

        //监听状态 更改
        form.on('switch(switchStatus)', function (obj) {
            let id = obj.othis.parent().attr('data-id');
            let status = obj.elem.checked ? 1 : 0;
            $.ajax({
                url: '/admin/category/status?id=' + id + '&status=' + status,
                success: (res) => {
                    if (res.status == 1) {
                        layer.msg('状态修改成功');
                        // window.location.reload();
                    } else {
                        layer.msg('状态修改失败');
                    }
                }
            });
            return false;
        });

        function editCls(that, id, type) { // 分类修改  type 是 1 顶级  2级  3级
            let name = $(that).val();
            if (!name && (type == 1 || type == 2)) {
                return layObj.msg('分类名称不能为空')
            }
            if (!name && type == 3) { // 演示 应该放到修改回调中  进行处理
                return $(that).parent().remove()
            }
            let   url = '{:url("admin/edit")}?id=' + id + '&name=' + name
            layObj.get(url,  (res) =>{
                if (name && res) {
                    $(that).val(name)
                }
            })
            $.ajax({
                url: '{:url("admin/edit")}?id=' + id + '&name=' + name,
                success(res) {
                    if (name && res) {
                        $(that).val(name)
                    }
                }
            })
        }

        // 删除二级分类
        $(document).on('click', '.delete', function(){
            let id = $(this).attr('data-id'); // fu
            let delete_status = {$deleteStatus};
            layObj.box(`是否删除当前分类`, () => {
                let   url = '/admin/category/status?id=' + id + '&status=' + delete_status
                layObj.get(url,  (res) =>{
                    if (res.status == 1) {
                        window.location.reload();
                    } else {
                        layer.msg('排序删除失败');
                    }
                })

            })
        })

        $(document).on('change', '.changeSort', function(){
            let id = $(this).attr('data-id');
            let val = $(this).val();

            if(!val){
                return;
            }
            let url = '/admin/category/listorder?id=' + id + '&sort='+val;
            // let url = 'http:www.baidu.com';
            layObj.get(url,function (res) {
                if (res.status == 1) {
                    window.location.reload();
                } else {
                    layer.msg('排序修改失败');
                }
            })

        })

        $(document).on('click', '.classChildFind', function(){
            if ($(this).find('i')[0]) {
                let id    = $(this).attr('data-id');
                let level = $(this).attr('data-level');
                let datahas  = $(this).attr('data-has');
                var opentype = $(this).find('i')[0].getAttribute('data-direction');
                if (datahas == '1') {
                    window.classOpenClose(opentype, id, level);
                } else {
                    let thislevel = level * 1 + 1;
                    if (!id) { return; }
                    let url = '/admin/category/getChildCate?pid=' + id;
                    var cnp = getClassNamePrefix(level);
                    layObj.get(url, function(res) {
                        if (res.status == 1) {
                            if (res.result.length > 0) {
                                var data = res.result;
                                for (let dc=data.length-1; dc>=0; dc--) {
                                    var thisdata = data[dc];
                                    var trstr = '   <tr id="category_' + thisdata.id + '">\n' +
                                        '                    <td>\n' +
                                        '                        <div class="layui-input-inline">\n' +
                                        '                            <input type="text" value="' + thisdata.listorder + '" data-id="' + thisdata.id + '" class="changeSort layui-input">\n' +
                                        '                        </div>\n' +
                                        '                    </td>\n' +
                                        '                    <td>' + thisdata.id + '</td>\n' +
                                        '                    <td data-id="' + thisdata.id + '" class="classChildFind" data-level="' + thislevel + '" data-has="0">\n' + cnp;
                                    if (thisdata.childCount > 0) {
                                        trstr = trstr + '                        <i class="layui-icon">&#xe623;</i>\n';
                                    }
                                    trstr = trstr + '                        ' + thisdata.name + '\n' +
                                        '                    </td>\n' +
                                        '                    <td>' + thisdata.create_time + '</td>\n' +
                                        '                    <td>' + thisdata.update_time + '</td>\n' +
                                        '                    <td>' + thisdata.operate_user + '</td>\n' +
                                        '                    <td data-id="' + thisdata.id + '" data-level="0">\n';
                                    if (thisdata.status == 1) {
                                        trstr = trstr + '<input type="checkbox" checked name="status" lay-skin="switch"\n';
                                    } else {
                                        trstr = trstr + '<input type="checkbox" name="status" lay-skin="switch"\n';
                                    }

                                    trstr = trstr + '                                           lay-filter="switchStatus"\n' +
                                        '                                           lay-text="ON|OFF">\n' +
                                        '                    </td>\n' +
                                        '                    <td>\n' +
                                        '                        <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete delete" data-ptype="1"\n' +
                                        '                           lay-event="delete" data-id="' + thisdata.id + '"><i class="layui-icon">&#xe640;</i></a>\n' +
                                        '\n' +
                                        '                        <button type="button" data-id="' + thisdata.id + '" class="layui-btn layui-btn-xs update"><i class="layui-icon">&#xe642;</i></button>' +
                                        '\n';
                                    if (thislevel < 3) {
                                        trstr = trstr + '                        <button type="button" data-id="' + thisdata.id + '" class="layui-btn layui-btn-xs addcate">+</button>';
                                    }
                                    trstr = trstr + '                    </td>\n' +
                                        '                </tr>';
                                    $("#category_" + thisdata.pid).after(trstr);
                                    form.render();
                                }
                            }
                        } else {
                            layer.msg(res.message);
                        }
                    })
                    $(this).find('i')[0].innerHTML = '&#xe625;'
                    $(this).find('i')[0].setAttribute('data-direction', '1');
                    $(this).attr('data-has', '1');
                }
            }
        });

        window.getClassNamePrefix = function(level) {
            var string = "";
            for (i=0; i<level; i++) {
                string = string + '<span style="margin-right: 6px; padding-left: 16px;"></span>';
            }
            return string;
        }

        window.classOpenClose = function(opentype, id, level) {
            var trnum = $(".classChildFind");
            let isopen = 0;
            for (i=0; i<trnum.length; i++) {
                var thisnode = trnum[i];
                var thisid   = thisnode.getAttribute('data-id');
                var thislevel= thisnode.getAttribute('data-level');
                if (isopen == 0) {
                    if (thisid != id) {
                        continue;
                    }
                    isopen = 1;
                    if (opentype == '0') {
                        thisnode.getElementsByTagName('i')[0].innerHTML = '&#xe625;'
                        thisnode.getElementsByTagName('i')[0].setAttribute('data-direction', '1');
                    } else if (opentype == '1') {
                        thisnode.getElementsByTagName('i')[0].innerHTML = '&#xe623;'
                        thisnode.getElementsByTagName('i')[0].setAttribute('data-direction', '0');
                    }
                    continue;
                }
                if (thislevel > level && isopen == 1) {
                    if (opentype == '0' && (thislevel-level) == 1) {
                        thisnode.parentElement.style = '';
                    } else if (opentype == '1') {
                        if (thisnode.getElementsByTagName('i')[0]) {
                            thisnode.getElementsByTagName('i')[0].innerHTML = '&#xe623;'
                            thisnode.getElementsByTagName('i')[0].setAttribute('data-direction', '0');
                        }
                        thisnode.parentElement.style = 'display: none';
                    }
                } else {
                    isopen = 0;
                    break;
                }
            }
        }

    })
</script>
</body>
</html>
